/**
    这个页面，展示三个内容
    1、级联选择器
    2、树形数据
    3、表格树

*/

<template>
    <div style="text-align:left;">
        <!--级联选择器-->
        <h3>级联选择器</h3>
        <div>
            <el-cascader v-model="value" :options="options" @change="handleChange"
             :props="{label:'name',value:'id'}"></el-cascader>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: [], //级联选择器，选中的数据
            options: [{}],  //级联选择器，需要的数据源
        }
    },
    mounted(){
        this.onloadCategory()
    },
    methods: {

        //加载递归分类数据
        onloadCategory(){
            let url='http://localhost:5262/category/recurse'
            this.$http.get(url).then(res=>{
                if(res.data.code ==200){
                    this.options = res.data.result
                }
            })
        },

        //级联选择器的改变事件
      handleChange(value) {
        console.log(value);
      }
    }
}
</script>